@charset "utf-8";
@import "reset";
@import "iconfont";
//把px转化为rem的函数
@function r($px){
    @return $px/40*1rem;
}
@mixin aImg{
    overflow: hidden;
    position: relative;
    img{
        position: absolute;
        width: 100%;
        top:-9999px;
        bottom:-9999px;
        left:-9999px;
        right:-9999px;
        margin: auto;
    }
}
.family_web{
    overflow: hidden;
    width: 100%;
    height: 100%;
//  导航栏
    .family_nav{
        width: 100%;
        height: 30px;
        background: #222;
        border-bottom: 1px solid #222;
        z-index: 9999;
        position: fixed;
        .BG_bg{
            background: #222222;
        }
        .nav_fluid{
            width: 70%;
            height: 30px;   
            .nav_log{
                width: 150px;
                margin-top: -5px;
                img{
                     width: 100%;
                }
            }
            .nav_hone{
                ul{
                    .active{
                        a{
                            background: #111;
                            color: white;
                        }
                    }
                    li{
                        a{
                            font-size: r(16);
                        }
                        a:hover{
                            color: #ccc;
                        }
                        .toggle_bg{
                            background: #222222;
                            li a{
                                background: #222;
                                color: #eee;
                                &:hover{
                                    background: #ccc;
                                    color: #666;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
//  主体
    .family_main{
        width: 100%;
        margin-top: 50px;
//      flash
        .main_top{
            background: #8bc01f;
            width: 100%;
            padding-bottom: 50px;
            .main_flash{
            width: 70%;
            margin: 0 auto;
            margin-top: 50px;
            padding: 0;
            .main_flash_left{
                .flash_left_top{
                    min-width: 700px;
                    .left_top_left,.left_top_right{
                        display: inline-block;
                    }
                    .left_top_left{
                        width: 45px;
                        height: 45px;
                        background: #fff;
                        line-height: 45px;
                        text-align: center;
                        p{
                            font-size: 40px;
                            color: #8bc01f;
                        }
                    }
                    .left_top_right{
                        h1{
                            color: white;
                            font-size: 40px;
                        }
                    }
                }
                    .flash_left_midde{
                        margin-left: 15px;
                        margin-top: 10px;
                        p{
                            color: white;
                            font-size: r(23);
                        }
                    }
                    .flash_left_down{
                        margin-top: r(65);
                        line-height: 18px;
                        p{
                            color: white;
                            font-size: r(14);
                        }
                        p:nth-child(2){
                            margin-top: r(30);
                        }
                        p:nth-child(3){
                            margin-top: r(25);
                        }
                    }
                    .flash_left_anniu{
                        background: #e8f2d2;
                        width: r(100);
                        height: r(35);
                        border-radius: 4px;
                        text-align: center;
                        line-height: r(35);
                        margin-top:r(50);
                        a{
                            color: #8bc01f;
                            font-size: r(15);
                        }
                        &:hover{
                            background: #fff;
                        }
                    }
                }
                .main_flash_right{
                    &>div{
                        width: r(470);
                        height: r(445);
                       @include aImg;
                    }
                }
            }
        }
//      player
        .main_midde{
            width: 100%;
            padding-bottom: 50px;
            background: #3393df;
            .mian_player{
                width: 70%;
                margin: 0 auto;
                .player_top{
                    margin-top: 50px;
                    min-width: 700px;
                    margin-bottom: 20px;
                    div{
                        display: inline-block;
                        p{
                            color: white;
                            font-size: 30px;
                        }
                    }
                    div:nth-child(1){
                        width: 30px;
                        height: 30px;
                        line-height: 30px;
                        background: #fff;
                        text-align: center;
                        p{
                            color: #3393df;
                            font-size: 25px;
                        }
                    }
                }
                .player_left{
                    div{
                        width: r(315);
                        height: r(300);
                        @include aImg;
                    }
                }
                .player_cent{
                    margin-top: 10px;
                    
                    div{
                        line-height: 20px;
                        margin-top: 30px;
                        h4{
                            font-size: r(20);
                            color: white;
                            margin-bottom: 10px;
                        }
                        p{
                            font-size: r(15);
                            color: white;
                        }
                    }
                }
                .player_right{
                    margin-top: 150px;
                    div{
                        width: r(267);
                        height: r(278);
                        @include aImg;
                    }
                    
                }
            }
        }
//      中部
        .main_bbp{
            width: 70%;
            margin: 0 auto;
            margin-top: 50px;
            padding-bottom: 150px;
//          Air,open
            .bbp{
                .bbp_title{
                    div{
                        display: inline-block;
                        P{
                            font-size: 30px;
                            color: #3393df;
                        }
                    }
                    div:nth-child(1){
                        width: 30px;
                        height:30px;
                        background: #3393df;
                        line-height: 30px;
                        text-align: center;
                        p{
                            color: white;
                        }
                    }
                }
                &>div:nth-child(2){
                    margin-top: 10px;
                    p{
                        font-size: r(18);
                    }
                }
                .bbp_font{
                    position: relative;
                    h5{
                        color: #3393df;
                        margin-top: 25px;
                        margin-bottom: 10px;
                    }
                    p{
                        font-size: r(14);
                        text-indent: r(20);
                    }
                    .ddp_tscl{
                        margin-bottom: 40px;
                    }
                    .bbp_pic{
                        position: absolute;
                        right:  0;
                        bottom:-70%;
                        margin-top: 20px;
                        margin-left: 27%;
                        div{
                            width: r(145);
                            height: r(145);
                            @include aImg;
                        }
                    }
                }
            }
        }
//      尾部
        .main_ppd_bg{
            width: 100%;
            background: #f7f7f7;
            overflow: hidden;
           .main_ppd{
            width: 70%;
            margin: 0 auto;
            margin-top: 50px;
            padding-bottom: 150px;
//          stote,Publish
                .ppd{
                    .ppd_title{
                        div{
                            display: inline-block;
                            P{
                                font-size: 30px;
                                color: #3393df;
                            }
                        }
                        div:nth-child(1){
                            width: 30px;
                            height:30px;
                            background: #3393df;
                            line-height: 30px;
                            text-align: center;
                            p{
                                color: white;
                            }
                        }
                    }
                    &>div:nth-child(2){
                        margin-top: 10px;
                        p{
                            font-size: r(18);
                        }
                    }
                    .ppd_font{
                        position: relative;
                        h5{
                            color: #3393df;
                            margin-top: 20px;
                            margin-bottom: 10px;
                        }
                        p{
                            font-size: r(14);
                            text-indent: r(20);
                        }
                        .ddp_tscl{
                            margin-bottom: 40px;
                        }
                         .ppd_pic{
                            position: absolute;
                            right: 0;
                            bottom: -110%;
                            margin-top: 20px;
                            margin-left: 27%;
                            div{
                                width: r(145);
                                height: r(145);
                                @include aImg;
                            }
                        }
                    }
                }
            }
        }
    }
 //   版权
    .family_copy{
        width: 100%;
        height:100px;
        background: #3b3b3b;
        overflow:hidden ;
        position: relative;
        .copy_left{
            width: 70%;
            margin: 0 auto;
            margin-top: r(20);
            .left_son1{
                ul{
                    li{
                        display: inline-block;
                        margin-right: r(15);
                        a{
                            font-size: r(16);
                            color: #a1a3ab;
                            &:hover{
                                color: white;
                            }
                        }
                    }
                }
            }
            .left_son2{
                margin-top: r(15);
                p{
                    font-size: r(16);
                    color: #a1a3ab;
                }
            }
        }
        .copy_right{
            position: absolute;
            right: 18%;
            top: 30%;
            ul{
                li{
                    margin-left: r(10);
                    display: inline-block;
                    div{
                        width: r(40);
                        height: r(40);
                        border-radius:50% ;
                        background: #d8d8e0;
                        line-height:r(40);
                        text-align: center;
                        i{
                            color: #4c4c52;
                            font-size: r(25);
                            display: block;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}
//媒体查询
@media only screen and (max-width:768px){
    .family_web{
        width: 100%;
//      导航栏
        .family_nav{
            width: 100%;
            .nav_fluid{
                width: 100%;
                .navbar-toggle {
                    padding: 5px 5px;
                }
                .nav_log{
                    img{
                        width: 70%;
                    }
                }
            }
        }
//      主体部分
        .family_main{
            width: 100%;
//          flash
            .main_top{
                width: 100%;
                .main_flash{
                    width: 100%;
                }
            }
//          player
            .main_midde{
                width: 100%;
                .mian_player{
                    width: 100%;
                }
            }
            .main_bbp{
                width: 100%;
                .bbp{
                    width: 100%;
                }
            }
            .main_ppd_bg{
                width: 100%;
                .main_ppd{
                    width: 100%;
                    .ppb{
                        width: 100%;
                    }
                }
            }
        }
//      版权
        .family_copy{
            width: 100%;
            .copy_right{
                display: none;
            }
        }
    }
}
//@media only screen and (max-width:991px){
//  .family_web{
//      width: 100%;
//      .show_nav{
//          width: 100%;
//          .nav_fluid{
//              width: 80%;
//              font-size: r(14);
//          }
//      }
//      .family_main{
//          width: 100%;
//          .main_flash{
//              width: 80%;
//          }
//      }
//  }
//}